<div ng-if="!vars.EditorIsInit">
    <md-progress-linear md-mode="indeterminate"></md-progress-linear>
</div>
<div ng-if="vars.EditorIsInit">


    <div ngsf-fullscreen="fullscreenCtrl" class="fullscreen md-tabs-fix" ng-class="::vars.uiTheme.name" >

        <md-tabs md-dynamic-height md-border-bottom md-selected="vars.selectedTab" md-autoselect class="sql-tabs" >

            <md-tab ng-repeat="tab in vars.tabs track by $index" ng-click="changeTab(tab);" style="border:1px sienna solid">

                <md-tab-label>
                    {{tab.name + (tab.changed ? ' *' : '')}}
                    <i class="mdi mdi-pencil ml+" ng-click="changeTabName(tab, $event)" style="cursor: pointer"></i>
                    <i class="mdi mdi-close" ng-click="removeTab(tab, $event)" style="cursor: pointer"></i>
                </md-tab-label>

                <md-tab-body>

                    <div style="display: table; width: 100%;">
                        <div style="min-height: 100px; position: relative; display: table-cell;">
                            <div resizable r-directions="['bottom']" r-height="300">
                                <md-menu mousepoint-menu>

                                    <div
                                        ng-show="editorVisiable"
                                        ng-right-click="$mdOpenMousepointMenu($event)"
                                        ui-ace="" load="aceLoaded"
                                        style="width: 100%; height: 100%"
                                        ng-mouseenter
                                    ></div>

                                    <md-menu-content id="menu" width="4">
                                        <md-menu-item><md-button ng-click="rightMenuProcess('Snippet')"> <i class="mdi mdi-fish"></i>Make snippet</md-button></md-menu-item>
                                        <md-menu-item><md-button ng-click="rightMenuProcess('AutoFormat')"> <i class="mdi mdi-format-size"></i>AutoFormat</md-button></md-menu-item>
                                        <md-menu-item><md-button ng-click="rightMenuProcess('Expand')"> <i class="mdi mdi-expand"></i>Expand</md-button></md-menu-item>
                                        <md-menu-item><md-button ng-click="rightMenuProcess('Collapse')"> <i class="mdi mdi-compress"></i>Collapse</md-button></md-menu-item>
                                        <md-menu-item><md-button ng-click="rightMenuProcess('Collapse All')"> <i class="mdi mdi-compress"></i>Collapse All</md-button></md-menu-item>
                                        <md-menu-divider></md-menu-divider>
                                    </md-menu-content>
                                </md-menu>
                            </div>

                            <md-button class="md-raised1 md-primary" ng-disabled="tab.loading" ng-click="execute('all', tab)">{{tab.buttonTitle}}</md-button>
                            <md-button class="md-raised1 md-primary" ng-disabled="tab.loading" ng-click="execute('current', tab)">Run current  ⌘ + ⏎</md-button>

                            <md-button class="md-icon-button " ng-click="fullscreenCtrl.toggleFullscreen()" aria-label="fullscreen">
                                <i class="mdi mdi-fullscreen"></i>
                                <md-tooltip>Full screen</md-tooltip>
                            </md-button>


                            <md-button class="md-icon-button" ng-click="save(tab, $event)" show-if-fullscreen="false" aria-label="save">
                                <i class="mdi mdi-content-save"></i>
                                <md-tooltip>Save</md-tooltip>
                            </md-button>

                            <md-menu md-position-mode="target-right target" ng-if="vars.sqlHistory.length" show-if-fullscreen="false">
                                <md-button aria-label="menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
                                    <i class="mdi mdi-history"></i>
                                </md-button>
                                <md-menu-content width="4">
                                    <md-menu-item ng-repeat="item in vars.sqlHistory track by $index" ng-click="load(item)">
                                        <md-button>
                                            {{item.name}}
                                            <md-tooltip>Query log</md-tooltip>
                                            <div class="pull-right">
                                                <i class="mdi mdi-close ml+" ng-click="removeHistory(item, $event)"></i>
                                            </div>
                                        </md-button>
                                    </md-menu-item>
                                </md-menu-content>
                            </md-menu>

                            <md-input-container>
                                <md-select ng-model="vars.db" placeholder="Select database">
                                    <md-optgroup label="Database">
                                        <md-option ng-value="dbb.name" ng-repeat="dbb in vars.databasesList track by $index" ng-click="changeRootSelectDatabase(dbb.name,'s')">USE {{::dbb.name}}</md-option>
                                    </md-optgroup>
                                </md-select>
                            </md-input-container>







                            <small class="pull-right" ng-if="vars.LastStatistics" style="color: silver;padding-top: 20px">
                                {{vars.LastStatistics.elapsed| number:2}} sec.| {{vars.LastStatistics.rows_read| number}}
                                rows.| {{vars.LastStatistics.bytes_read|filesize}}
                            </small>

                            <div ng-if="tab.loading" style="display: table; width: 100%;">
                                <md-progress-linear md-mode="indeterminate" ></md-progress-linear>
                                <i style="font-size: 70%">..... {{tab.progress.query}} </i>
                            </div>





                        </div>
                    </div>

                    <!-- ---------------------------------------- BASE RENDER RESULT -------------------- -->
                    <span ng-if="!tab.loading" style="width: 100%;height: 100%" ng-include="'app/sql/renderResult.html'"></span>
                    <!-- ------------------ -->

                </md-tab-body>

            </md-tab>

            <md-tab ng-click="addTab()">
                <md-tab-label>
                    <i class="mdi mdi-plus-circle"></i>
                </md-tab-label>
            </md-tab>

        </md-tabs>
    </div>


</div>
